<template>
    	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>

  <view class="appointment-page">
    <!-- 顶部导航 -->

    <!-- 日期选择 -->
    <view class="date-picker-container">
      <picker 
        mode="date" 
        :value="currentDate" 
        :start="minDate" 
        :end="maxDate" 
        @change="onDateChange"
		disabled=""
      >
        <view class="date-display">
          <text class="date-text text13">{{ formatDate(currentDate) }}</text>
          <uni-icons type="down" size="16" color="#666"></uni-icons>
        </view>
      </picker>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view 
        class="tab-item" 
        v-for="tab in filterTabs" 
        :key="tab.value"
        :class="{ active: activeTab === tab.value }"
        @click="activeTab = tab.value"
      >
        <text class="tab-text text12">{{ tab.label }}</text>
        <!-- <text class="tab-count" v-if="tab.count > 0">{{ tab.count }}</text> -->
      </view>
    </view>

    <!-- 预约列表 -->
    <view class="appointment-list">
      <!-- 列表项 -->
      <view 
        class="appointment-item" 
        v-for="item in filteredAppointments" 
        :key="item.id"
        @click="handleItemClick(item)"
      >
        <!-- 左侧：图标和文字信息 -->
        <view class="left-section">
          <view class="appointment-icon" :style="{ backgroundColor: item.color }">
            <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
          </view>
          <view class="appointment-info">
            <text class="patient-name text12">{{ item.patientName }}</text>
            <text class="appointment-type text11">{{ item.type }}</text>
            <text class="appointment-time text11">
              <uni-icons type="clock" size="14" color="#999"></uni-icons>
              {{ item.time }}
            </text>
          </view>
        </view>

        <!-- 右侧：状态和箭头 -->
        <view class="right-section">
          <view class="status-tag" :class="item.statusClass">
            <text class="status-text text11">{{ item.status }}</text>
          </view>
          <uni-icons type="arrowright" size="20" color="#ccc"></uni-icons>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredAppointments.length === 0 && !isLoading">
        <uni-icons type="calendar" size="60" color="#eee"></uni-icons>
        <text class="empty-text">暂无预约记录</text>
      </view>

      <!-- 加载中 -->
      <view class="loading-state" v-if="isLoading">
        <uni-loading type="circle" size="24" color="#1890FF"></uni-loading>
        <text class="loading-text">加载中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
  const fontSizeStore = useFontSizeStore();

// 日期相关
const currentDate = ref('');
const minDate = ref('2024-01-01');
const maxDate = ref('');

// 筛选相关
const filterTabs = ref([
  { label: '全部', value: 'all', count: 0 },
  { label: '待处理', value: 'pending', count: 0 },
  { label: '已完成', value: 'completed', count: 0 },
  { label: '已取消', value: 'cancelled', count: 0 }
]);
const activeTab = ref('all');

// 数据相关
const appointmentList = ref([]);
const isLoading = ref(true);

// 初始化
onMounted(() => {
  // 设置默认日期为今天
  const today = new Date();
  currentDate.value = formatDateForPicker(today);
  maxDate.value = formatDateForPicker(today);
  
  // 加载数据
  loadAppointmentData();
});

// 格式化日期为 YYYY-MM-DD
function formatDateForPicker(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 格式化日期显示
function formatDate(dateStr) {
  const date = new Date(dateStr);
  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  return `${date.getMonth() + 1}月${date.getDate()}日 ${weekDays[date.getDay()]}`;
}

// 加载预约数据
function loadAppointmentData() {
  isLoading.value = true;
  
  // 模拟API请求
  setTimeout(() => {
    appointmentList.value = [
      {
        id: 1,
        patientName: '张建国',
        type: '内科 - 常规检查',
        time: '09:30',
        status: '待处理',
        statusClass: 'status-pending',
        icon: 'stethoscope',
        color: '#1890FF'
      },
      {
        id: 2,
        patientName: '李秀英',
        type: '眼科 - 视力检查',
        time: '10:15',
        status: '待处理',
        statusClass: 'status-pending',
        icon: 'eye',
        color: '#1890FF'
      },
      {
        id: 3,
        patientName: '王建华',
        type: '牙科 - 洗牙',
        time: '14:00',
        status: '已完成',
        statusClass: 'status-completed',
        icon: 'dentistry',
        color: '#00B42A'
      },
      {
        id: 4,
        patientName: '陈淑兰',
        type: '妇科 - 常规检查',
        time: '15:30',
        status: '已取消',
        statusClass: 'status-cancelled',
        icon: 'woman',
        color: '#86909C'
      },
      {
        id: 5,
        patientName: '赵卫东',
        type: '骨科 - 复诊',
        time: '16:00',
        status: '待处理',
        statusClass: 'status-pending',
        icon: 'bone',
        color: '#1890FF'
      }
    ];
    
    // 更新筛选计数
    updateFilterCounts();
    isLoading.value = false;
  }, 800);
}

// 更新筛选标签计数
function updateFilterCounts() {
  const counts = {
    all: appointmentList.value.length,
    pending: appointmentList.value.filter(item => item.status === '待处理').length,
    completed: appointmentList.value.filter(item => item.status === '已完成').length,
    cancelled: appointmentList.value.filter(item => item.status === '已取消').length
  };
  
  filterTabs.value.forEach(tab => {
    tab.count = counts[tab.value];
  });
}

// 根据筛选条件过滤预约
const filteredAppointments = computed(() => {
  if (activeTab.value === 'all') {
    return appointmentList.value;
  }
  
  // 映射状态值到中文
  const statusMap = {
    pending: '待处理',
    completed: '已完成',
    cancelled: '已取消'
  };
  
  return appointmentList.value.filter(item => 
    item.status === statusMap[activeTab.value]
  );
});

// 日期变更处理
function onDateChange(e) {
  currentDate.value = e.detail.value;
  // 实际应用中这里应该重新加载对应日期的数据
  loadAppointmentData();
}


// 点击列表项
function handleItemClick(item) {
  // 跳转到详情页
  uni.navigateTo({
    url: `/pages/appointmentDetail/appointmentDetail?id=${item.id}`
  });
}
</script>

<style scoped lang="scss">
$primary: #1890FF;
$success: #00B42A;
$gray: #86909C;
$light-gray: #F2F3F5;

.appointment-page {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 导航栏样式
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  background-color: #FFFFFF;
  // border-bottom: 1px solid #EEEEEE;
  
  .nav-title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }
  
  .nav-actions {
    .refresh-btn {
      background: transparent;
      border: none;
      padding: 5px;
      line-height: normal;
    }
  }
}

// 日期选择器样式
.date-picker-container {
  padding: 12px 16px;
  background-color: #FFFFFF;
  
  .date-display {
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 16px;
    
    .date-text {
      margin-right: 8px;
    }
  }
}

// 筛选标签样式
.filter-tabs {
  display: flex;
  padding: 8px 16px;
  background-color: #FFFFFF;
  // border-bottom: 1px solid #EEEEEE;
  overflow-x: auto;
  
  .tab-item {
    display: flex;
    align-items: center;
    margin-right: 16px;
    padding: 2px 6px;
    border-radius: 20px;
    background-color: $light-gray;
    white-space: nowrap;
    transition: all 0.2s ease;
    
    &.active {
      background-color: $primary;
    }
    
    .tab-text {
      font-size: 14px;
      color: #666666;
    }
    
    &.active .tab-text {
      color: #FFFFFF;
    }
    
    .tab-count {
      margin-left: 6px;
      padding: 0 6px;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      font-size: 12px;
      color: #666666;
    }
    
    &.active .tab-count {
      background-color: rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
    }
  }
}

// 预约列表样式
.appointment-list {
  padding-bottom: 20px;
}

// 列表项样式
.appointment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin: 10px 16px;
  background-color: #FFFFFF;
  border-radius: 8px;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  // transition: transform 0.1s ease;
  // border:1rpx solid #ddd;
  
  &:active {
    transform: scale(0.99);
  }
  
  .left-section {
    display: flex;
    align-items: center;
    
    .appointment-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .appointment-info {
      margin-left: 14px;
      
      .patient-name {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        display: block;
        margin-bottom: 4px;
      }
      
      .appointment-type {
        font-size: 13px;
        color: #666666;
        display: block;
        margin-bottom: 2px;
      }
      
      .appointment-time {
        font-size: 12px;
        color: #999999;
        display: flex;
        align-items: center;
        
        .time-icon {
          margin-right: 4px;
        }
      }
    }
  }
  
  .right-section {
    display: flex;
    align-items: center;
    
    .status-tag {
      padding: 4px 10px;
      border-radius: 4px;
      margin-right: 8px;
      
      .status-text {
        font-size: 12px;
      }
    }
    
    .status-pending {
      background-color: rgba(24, 144, 255, 0.1);
      
      .status-text {
        color: $primary;
      }
    }
    
    .status-completed {
      background-color: rgba(0, 180, 42, 0.1);
      
      .status-text {
        color: $success;
      }
    }
    
    .status-cancelled {
      background-color: rgba(134, 144, 156, 0.1);
      
      .status-text {
        color: $gray;
      }
    }
  }
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  
  .empty-text {
    margin-top: 16px;
    font-size: 14px;
    color: #999999;
  }
}

// 加载状态样式
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  
  .loading-text {
    margin-top: 12px;
    font-size: 14px;
    color: #666666;
  }
}
</style>
    